<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item :label="$t('姓名')">
              <a-input :placeholder="$t('请输入姓名')" v-model="queryParam.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item :label="$t('性别')">
              <a-select v-model="queryParam.gender" :placeholder="$t('请选择性别')">
                <a-select-option v-for="(item, index) in sexList" :key="index" :value="item.value">
                  {{ item.title }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item :label="$t('电话')">
                <a-input :placeholder="$t('请输入电话')" v-model="queryParam.phoneNumber"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item :label="$t('邮箱')">
                <a-input :placeholder="$t('请输入邮箱')" v-model="queryParam.email"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item :label="$t('孩子姓名')">
                <a-input :placeholder="$t('请输入姓名')" v-model="queryParam.childName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item :label="$t('国家')">
                <a-input :placeholder="$t('请输入')" v-model="queryParam.country"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item :label="$t('洲/省')">
                <a-input :placeholder="$t('请输入')" v-model="queryParam.province"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item :label="$t('城市')">
                <a-input :placeholder="$t('请输入')" v-model="queryParam.city"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item :label="$t('地址1')">
                <a-input :placeholder="$t('请输入')" v-model="queryParam.address1"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item :label="$t('地址2')">
                <a-input :placeholder="$t('请输入')" v-model="queryParam.address2"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item :label="$t('邮编')">
                <a-input :placeholder="$t('请输入')" v-model="queryParam.postalCode"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item :label="$t('失效邮箱通知')">
                <a-select v-model="queryParam.notifyMe" :placeholder="$t('请选择')">
                  <a-select-option v-for="(item, index) in isOpenList" :key="index" :value="item.value">
                    {{ item.title }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item :label="$t('接收活动推送')">
                <a-select v-model="queryParam.sendEmail" :placeholder="$t('请选择')">
                  <a-select-option v-for="(item, index) in isOpenList" :key="index" :value="item.value">
                    {{ item.title }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </template>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">{{$t("查询")}}</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">{{$t("重置")}}</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? $t('收起') : $t('展开') }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button type="primary" icon="download" @click="handleExportXls('用户免责声明-签署用户信息')" v-has="'BisLiabilityUserInfo:export'">{{$t("导出")}}</a-button>
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table ref="table" size="middle" bordered rowKey="id" class="j-table-force-nowrap" :scroll="{ x: true }"
        :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" @change="handleTableChange">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <div v-else>
            <a-popover trigger="hover" v-for="(item,i) in text.split(',')" :key="i">
              <template slot="content">
                <img :src="getImgView(item)" width="240px" />
              </template>
              <img   
                :src="getImgView(item)"
                height="25px"
                alt=""
                style="max-width:80px;font-size: 12px;font-style: italic;margin-right: 5px;"
              />
            </a-popover>
          </div>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handleDetail(record)">{{ $t('更多信息') }}</a>
          <a-divider type="vertical" v-has="'BisLiabilityUserInfo:print'"/>
          <a @click="handlePrint(record)" v-has="'BisLiabilityUserInfo:print'">{{ $t('补打凭条') }}</a>
        </span>

      </a-table>
    </div>

    <bis-liability-user-info-modal ref="modalForm" @ok="modalFormOk" />
    <fill-modal ref="fillModal" />
  </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { initDictOptions } from '@/components/dict/JDictSelectUtil'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import BisLiabilityUserInfoModal from './modules/BisLiabilityUserInfoModal'
import FillModal from './modules/FillModal'

export default {
  name: "BisLiabilityUserInfoList",
  mixins: [JeecgListMixin],
  components: {
    BisLiabilityUserInfoModal,
    FillModal
  },
  data() {
    return {
      description: '用户免责声明签署记录',
      // 表头
      columns: [
        {
          title: this.$t('姓名'),
          align: "center",
          dataIndex: 'name'
        },
        {
          title: this.$t('性别'),
          align: "center",
          dataIndex: 'gender_dictText'
        },
        {
          title: this.$t('电话'),
          align: "center",
          dataIndex: 'phone'
        },
        {
          title: this.$t('邮箱'),
          align: "center",
          dataIndex: 'email'
        },
        {
          title: this.$t('生日'),
          align: "center",
          dataIndex: 'birthday',
          customRender: function (text) {
            return !text ? "" : (text.length > 10 ? text.substr(0, 10) : text)
          }
        },
        {
          title: this.$t('照片'),
          align: "center",
          dataIndex: 'picture',
          scopedSlots: { customRender: 'imgSlot' },
        },
        {
          title: this.$t('国家'),
          align: "center",
          dataIndex: 'country'
        },
        {
          title: this.$t('洲/省'),
          align: "center",
          dataIndex: 'province'
        },
        {
          title: this.$t('城市'),
          align: "center",
          dataIndex: 'city'
        },
        {
          title: this.$t('地址1'),
          align: "center",
          dataIndex: 'address1'
        },
        {
          title: this.$t('地址2'),
          align: "center",
          dataIndex: 'address2'
        },
        {
          title: this.$t('邮编'),
          align: "center",
          dataIndex: 'postalCode'
        },
        {
          title: this.$t('失效邮箱通知'),
          align: "center",
          dataIndex: 'notifyMe_dictText'
        },
        {
          title: this.$t('接受活动推送'),
          align: "center",
          dataIndex: 'sendEmail_dictText'
        },
        {
          title: this.$t('签名'),
          align: "center",
          dataIndex: 'signPicture',
          scopedSlots: { customRender: 'imgSlot' },
        },
        {
          title: this.$t('操作'),
          dataIndex: 'action',
          align: "center",
          fixed: "right",
          width: 147,
          scopedSlots: { customRender: 'action' },
        }
      ],
      url: {
        list: "/game/bisLiabilityUserInfo/list",
        exportXlsUrl: "/game/bisLiabilityUserInfo/exportXls",
      },
      dictOptions: {},
      superFieldList: [],
      sexList: [],
      isOpenList: [],
    }
  },
  methods: {
    handlePrint(record){
      this.$refs.fillModal.show(record)
    },
    initDictConfig() {
      initDictOptions('sex').then((res) => {
        if (res.success) {
          this.sexList = res.result
          this.sexList.unshift({ title: this.$t('全部'), value: '' })
        }
      })
      initDictOptions('is_open').then((res) => {
        if (res.success) {
          this.isOpenList = res.result
          this.isOpenList.unshift({ title: this.$t('全部'), value: '' })
        }
      })
    },
    handleDetail(record) {
      this.$refs.modalForm.handleDetail(record);
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>